<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>登录-红色阳泉</title>
  <link rel="shortcut icon" href="myico2.ico" type="image/x-icon">
  <link rel="stylesheet" href="./css/reset.min.css">
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/login.css">
  <link rel="stylesheet" href="./css/iconfont.css">
</head>

<body>
  <div class="container" id="app">
    <header>
      <div class="logo">
        <a href="index.html"><img src="./images/logo2.png" alt=""></a>
      </div>
    </header>
    <div class="main">
      <div class="main-cont">
        <div class="box">
          <div class="login-tit">
            <a href="login.html" class="active">账号登录</a>
            <a href="regist.html">注 册</a>
          </div>
          <form action="" class="active">
            <label for="username">
              <input type="text" id="username" name="username" placeholder="请输入账号" v-model.trim="user.userName"
                @focus="foucus" @blur="blur">
            </label>
            <p> <span v-text="userNameErr"></span></p>
            <label for="password">
              <input type="password" id="password" name="password" placeholder="密码" v-model.trim="user.passWord"
                @focus="foucus" @blur="blur">
            </label>
            <p><span v-text="passWordErr"></span></p>

            <input type="button" id="login" value="登录">
          </form>

        </div>
      </div>

    </div>
    <footer>
      <div class="footer">
        <p> Copyright © 红色阳泉 版权所有 </p>
        <p> All Rights Reserved </p>
      </div>
    </footer>
  </div>
  <script src="js/rem.js"></script>
  <script src="./js/vue.min.js"></script>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        user: {
          userName: '',
          passWord: ''
        },
        placeNow: '',
        userNameErr: '',
        passWordErr: ''
      },
      methods: {
        foucus(e) {
          this.placeNow = e.target.placeholder
          e.target.placeholder = ''
        },
        blur(e) {
          e.target.placeholder = this.placeNow
          if (e.target.id == 'username') {
            if (this.user.userName.length <= 0) {
              this.userNameErr = '账号不能为空'
            } else if (this.user.userName.length < 6) {
              this.userNameErr = '账号必须8位以上'
            } else {
              this.userNameErr = ''
            }
          }

          if (e.target.id == 'password') {
            if (this.user.passWord.length <= 0) {
              this.passWordErr = '密码不能为空'
            } else if (this.user.passWord.length < 6) {
              this.passWordErr = '密码必须6位以上'
            } else {
              this.passWordErr = ''
            }
          }

        }
      }
    })
  </script>
</body>

</html>